<template>
  <div>
    <a-button @click="displayUpgrade = true">升级固件</a-button>
    <a-modal @ok="submit" centered v-model:open="displayUpgrade" title="升级" width="600px">
      <a-card>
        <a-form ref="formRef" layout="vertical" :model="form" @submit="submit" :disabled="loading">
          <a-form-item label="选择价签尺寸" name="resolution" required>
            <EslResolutions @change="selectItem" v-model="form.resolution" />
          </a-form-item>
          <a-form-item label="选择版本" name="version" required>
            <a-radio-group
              v-model:value="form.version"
              :options="versionList"
              v-if="versionList.length > 0"
            ></a-radio-group>
            <a-empty v-else></a-empty>
          </a-form-item>
          <a-form-item label="已选择的标签">
            <div class="h-[100px] overflow-y-auto flex flex-wrap gap-2">
              <a-tag v-for="item in table.data">
                {{ item.tagCode }}
              </a-tag>
            </div>
          </a-form-item>
        </a-form>
      </a-card>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { upgradeVersion, listFw } from '@/api/modules/esl/priceTag';
import { table } from '../../data/data';
import { notify } from '@/utils/common/common';

const formRef = ref();
const displayUpgrade = ref(false);
const versionList = ref<any[]>([]);
const loading = ref(false);
const form = ref({
  resolution: '',
  version: '',
});

const selectItem = async () => {
  if (!form.value.resolution) return;
  const { data } = await listFw(form.value.resolution);
  versionList.value = data.data;
};
const submit = async () => {
  const isTruly = await formRef.value?.validate();
  if (!isTruly) return;
  const { data } = await upgradeVersion({
    firmware: {
      resolutionId: form.value.resolution,
      version: form.value.version,
    },
    tags: table.value.keys,
  });
  notify(data);
  displayUpgrade.value = false;
};
</script>

<style lang="scss" scoped></style>
